<template>
  <div>
    <ul>
      <!-- @click="shopNav(i, nav)" -->
      <li v-for="(nav, i) in categoriesNav" :key="i">
        <span>{{
          nav.title
          }}</span>
      </li>
    </ul>
  </div>
</template>

<script>

export default {
  props: ['categoriesNav']
    
}
</script>

<style lang="scss" scoped>

ul {
  display: flex;
  border-bottom: 1px solid #eaeaea;

  li {
    flex: 1;
    display: flex;
    align-items: center;
    text-align: center;
    height: 40px;
    line-height: 40px;
    font-size: 14px;

    span {
      display: block;
      width: 100%;
      line-height: 15px;
      border-left: 1px solid #eaeaea;

    }

    &.activeNav {
      color: #ef4562;
    }

  }
}
</style>